<template>
  <el-container class="layout-main">
    <el-aside class="aside-menu">
      <left-menu></left-menu>
    </el-aside>
    <el-container>
      <el-header class="top-header">
        <div class="user-info">
          <img v-if="loginUser.image" :src="fileServer + loginUser.image" alt="">
          <div class="info-con">
            <div>Welcome</div>
            <div>{{loginUser.description}}</div>
          </div>
          <div class="drop-con">
            <a href="javascript:void(0);" class="drop-item" title="系统设置更改"><i class="el-icon-setting"></i>系统设置</a>
            <a href="#/profile" class="drop-item" title="修改个人资料"><i class="el-icon-tickets"></i>资料修改</a>
            <a href="/logout" class="drop-item" title="退出系统"><i class="el-icon-back"></i>退出</a>
            <span class="arrow"></span>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LeftMenu from '@/components/LeftMenu'
import Network from '@/api/index'
import Config from '@/utils/config'
export default {
  data () {
    return {
      loginUser : {},
      fileServer : Config.fileServer
    }
  },

  components: { LeftMenu },

  computed: {},

  methods: {},

  created(){
    Network.getLoginUser().then(user => {
      this.loginUser = user;
      this.$store.commit('login',user);
    }).catch(err => {
      window.location.href = '/login.html';
    })
  }
}

</script>
<style rel="stylesheet/less" lang="less" scoped>
.layout-main{
  height: 100%;
}

.aside-menu{
  max-width: 230px;
}

.top-header{
  border-bottom: 1px solid #eee;
  max-height: 50px;

  .user-info{
    position: relative;
    float: right;
    padding: 10px;
    cursor: pointer;
    height: 50px;
    box-sizing: border-box;
    color: #666;

    &:hover{
      background: #f5f5f5;
      color: #333;

      .drop-con{
        display: block;
      }
    }

    img{
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }

    .info-con{
      float: right;
      font-size: 10px;
      line-height: 15px;
      padding-left: 10px;
      
      text-align: center;
    }

    .drop-con{
      display: none;
      position: absolute;
      right: 0;
      top: 50px;
      min-width: 120px;
      z-index: 2;
      background: #fff;
      padding-top: 10px;

      .arrow{
        position: absolute;
        right : 15px;
        top: 4px;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
        border-top-width: 0;
        border-bottom-color:#e5e5e5;
        filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));

        &:after{
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
          top: -4px;
          left: -6px;
          border-top-width: 0;
          border-bottom-color: #fff;
          content: " ";
          border-width: 6px;
        }
      }

      .drop-item{
        display: block;
        padding: 5px 10px;
        color: #999;
        border-bottom: 1px solid #e5e5e5;
        border-left:1px solid #e5e5e5;
        border-right:1px solid #e5e5e5;
        text-decoration: none;
        font-size: 14px;

        &:first-child{
          border-top: 1px solid #e5e5e5;
        }


        i{
          margin-right: 5px;
        }

        &:hover{
          background: #f5f5f5;
          color: #555;
          border-left:3px solid #1e8fc6
        }
      }
    }
  }
}

@media screen and(max-width: 641px) {
  .aside-menu{
    max-width: 0;
  }
}
</style>
